﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="OnlineCellphoneStore.Register" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Register</title>

    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

    <!-- My CSS -->
    <link href="../Design/colors.css" rel="stylesheet" type="text/css" />
    <link href="../Design/fonts.css" rel="stylesheet" type="text/css" />
    <link href="../Design/style.css" rel="stylesheet" type="text/css" />

    <!-- Latest compiled and minified jQuery -->
    <script src="../JavaScript/jquery-2.1.1.min.js"></script>

    <!-- Bootstrap -->
    <link href="../Bootstrap3.11/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../Bootstrap3.11/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
    <script src="../Bootstrap3.11/js/bootstrap.min.js"></script>

    <!-- Holder -->
    <script src="../Holder/holder.js"></script>

    <!-- LiveValidation -->
    <script src="../JavaScript/liveValidation.js"></script>

    <!-- Logic -->
    <script src="../JavaScript/Register.js"></script>
</head>
<body class="background-color-lightblue" style="font-family: 'Century Gothic';">
    <form id="form1" runat="server">
        <div class="container background-color-white">
            <div id="shortcuts" class="row background-color-azure">
                <ul class="nav navbar-nav navbar-right">
                    <li class="black" style="text-decoration: underline;"><a href="Login.aspx"><span class="glyphicon glyphicon-user"></span>
                        Log in</a></li>
                    <li class="black" style="text-decoration: underline;"><a href="Register.aspx"><span class="glyphicon glyphicon-pencil"></span>
                        Register</a></li>
                </ul>
                <ol class="breadcrumb" style="background-color: white; margin-top: 8px;">
                    <li><a href="../Main.aspx"><i class="icon-home"></i>
                        Home </a><span class="divider"></span></li>
                    <li><a href="../SitePages/About.aspx"><i class="icon-user"></i>
                        About </a><span class="divider"></span></li>
                    <li><a href="../SitePages/Contact.aspx"><i class="icon-envelope"></i>
                        Contact </a><span class="divider"></span></li>
                </ol>
            </div>
            <div id="header" class="row-fluid background-color-mylightblue shadow border">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="../Images/banner1.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Best Prices</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../Images/banner2.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Newest Phones</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../Images/banner3.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Full Warranty</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../Images/banner4.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Best Deals</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../Images/banner5.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Fast Delivery</p>
                            </div>
                        </div>
                    </div>
                    <script>
                        $('.carousel').carousel({
                            interval: 4000
                        });
                    </script>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            </div>
            <div id="menu" class="row-fluid">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">Online Store </a>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li><a href="../Search.aspx"><span class="glyphicon glyphicon-list"></span>
                                    All Products</a></li>
                                <li><a href="Login.aspx"><span class="glyphicon glyphicon-shopping-cart"></span>
                                    My Shoping Cart </a></li>
                            </ul>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container-fluid -->
                </nav>
            </div>
            <div id="content" class="row-fluid form-inline">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-pencil"></span>
                        Register
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            Please fill out your information
                        </div>
                        <div class="panel-footer">
                            <div class="panel-body">
                                <div class="col-md-9">
                                    <div class="row-fluind text-center">
                                        <table>
                                            <tr>
                                                <td>
                                                    <div>
                                                        <label>First Name</label><label class="error-message">*</label>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div id="divFirstName" class="form-group has-feedback">
                                                        <input type="text" id="txtFirstName" class="form-control pull-left" placeholder="First name" runat="server" />
                                                        <span id="iFirstName" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageFirstName" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageFirstName", "divFirstName", "iFirstName", "Must be a valid name!");
                                                        var val = new LiveValidation('txtFirstName', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Format, { pattern: /^[a-zA-Z- ]+$/ });
                                                        val.add(Validate.Presence);
                                                    </script>
                                                </td>
                                                <td>
                                                    <div>
                                                        <label>E-Mail</label><label class="error-message">*</label>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div id="divEmail" class="form-group has-feedback">
                                                        <input type="text" id="txtEmail" class="form-control pull-left" placeholder="e.g. me@gmail.com" runat="server" />
                                                        <span id="iEmail" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageEmail" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageEmail", "divEmail", "iEmail", "Must be a valid email address!");
                                                        var val = new LiveValidation('txtEmail', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Presence);
                                                        val.add(Validate.Email);
                                                    </script>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div>
                                                        <label>Last Name</label><label class="error-message">*</label>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div id="divLastName" class="form-group has-feedback">
                                                        <input type="text" id="txtLastName" class="form-control pull-left" placeholder="Last name" runat="server" />
                                                        <span id="iLastName" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageLastName" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageLastName", "divLastName", "iLastName", "Must be a valid name!");
                                                        var val = new LiveValidation('txtLastName', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Format, { pattern: /^[a-zA-Z- ]+$/ });
                                                        val.add(Validate.Presence);
                                                    </script>
                                                </td>
                                                <td>
                                                    <label>Username</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <div id="divUsername" class="form-group has-feedback">
                                                        <input type="text" id="txtUsername" class="form-control pull-left" placeholder="Only letters" runat="server" />
                                                        <span id="iUsername" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageUsername" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageUsername", "divUsername", "iUsername", "Must be a valid username!");
                                                        var val = new LiveValidation('txtUsername', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Format, { pattern: /^[a-zA-Z]+$/ });
                                                        val.add(Validate.Length, { minimum: 3, maximum: 8 });
                                                        val.add(Validate.Presence);
                                                    </script>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label>Address</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <div id="divAddress" class="form-group has-feedback">
                                                        <input type="text" id="txtAddress" class="form-control pull-left" placeholder="Address" runat="server" />
                                                        <span id="iAddress" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageAddress" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageAddress", "divAddress", "iAddress", "Cannot remain empty!");
                                                        var val = new LiveValidation('txtAddress', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Presence);
                                                    </script>
                                                </td>
                                                <td>
                                                    <label>Password</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <div id="divPass" class="form-group has-feedback">
                                                        <input id="txtPass" runat="server" class="form-control pull-left" placeholder="Password" type="password" />
                                                        <span id="iPass" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messagePass" class="control-label invisible error-message">
                                                    </label>
                                                    <script>
                                                        initFunctions("messagePass", "divPass", "iPass", "Must be a legal passsword!");
                                                        var val = new LiveValidation('txtPass', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Length, { minimum: 5, maximum: 10 });
                                                        val.add(Validate.Presence);
                                                    </script>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label>City</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <div id="divCity" class="form-group has-feedback">
                                                        <input type="text" id="txtCity" class="form-control pull-left" placeholder="City" runat="server" />
                                                        <span id="iCity" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageCity" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageCity", "divCity", "iCity", "Cannot remain empty!");
                                                        var val = new LiveValidation('txtCity', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Presence);
                                                    </script>
                                                </td>
                                                <td>
                                                    <label>Confirm Password</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <div id="divCPass" class="form-group has-feedback">
                                                        <input type="password" id="txtCPass" class="form-control pull-left" placeholder="Same as the Password" runat="server" />
                                                        <span id="iCPass" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageCPass" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageCPass", "divCPass", "iCPass", "Must be match to the passsword!");
                                                        var val = new LiveValidation('txtCPass', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Presence);
                                                        val.add(Validate.Confirmation, { match: 'txtPass' });
                                                    </script>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label>Country</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <div class="form-group has-feedback">
                                                        <asp:DropDownList ID="ddlCountries" CssClass="form-control" runat="server">
                                                        </asp:DropDownList>
                                                        <br />
                                                        <label>
                                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator_Countries" InitialValue="0" runat="server" ErrorMessage="Cannot remain empty!" CssClass="control-label error-message" ControlToValidate="ddlCountries"></asp:RequiredFieldValidator></label>
                                                    </div>
                                                </td>
                                                <td>
                                                    <label>Security Question</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <div class="form-group has-feedback">
                                                        <asp:DropDownList ID="ddlSQ" CssClass="form-control" runat="server" Width="350px">
                                                        </asp:DropDownList>
                                                        <br />
                                                        <label>
                                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator_SQ" InitialValue="0" runat="server" ErrorMessage="Cannot remain empty!" CssClass="control-label error-message" ControlToValidate="ddlSQ"></asp:RequiredFieldValidator></label>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label>Phone</label>
                                                </td>
                                                <td>
                                                    <div class="form-group has-feedback">
                                                        <input type="tel" id="txtPhone" class="form-control pull-left" placeholder="Local Phone" runat="server" />
                                                        <span id="iPhone" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <label>Answer</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <div id="divSA" class="form-group has-feedback">
                                                        <input type="text" id="txtSA" class="form-control pull-left" placeholder="Remember it!" runat="server" />
                                                        <span id="iSA" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageSA" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageSA", "divSA", "iSA", "Cannot remain empty!");
                                                        var val = new LiveValidation('txtSA', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Presence);
                                                    </script>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <label>Cellular</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <div id="divCellular" class="form-group has-feedback">
                                                        <input type="text" id="txtCellular" class="form-control pull-left" placeholder="Private Phone" runat="server" />
                                                        <span id="iCellular" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageCellular" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageCellular", "divCellular", "iCellular", "Must be a valid cellphone number!");
                                                        var val = new LiveValidation('txtCellular', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Presence);
                                                        val.add(Validate.Numericality, { onlyInteger: true });
                                                        val.add(Validate.Length, { minimum: 10, maximum: 10 });
                                                    </script>
                                                </td>
                                                <td>
                                                    <label>Favorites OS</label><label class="error-message">*</label>
                                                </td>
                                                <td>
                                                    <span>Android
                                                    <input id="cbAndroid" type="checkbox" value="1" name="subjects" runat="server" /></span>, <span>iOS
                                                        <input id="cbApple" type="checkbox" value="2" name="subjects" runat="server" /></span>
                                                    <p>
                                                        <span>Windows Phone
                                                    <input id="cbWindowsPhone" type="checkbox" value="3" name="subjects" runat="server" /></span>, <span>Blackbarry
                                                        <input id="cbBlackbarry" type="checkbox" value="4" name="subjects" runat="server" /></span>
                                                    </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div>
                                                        <label>CreditCard</label><label class="error-message">*</label>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div id="divCC" class="form-group has-feedback">
                                                        <input type="text" id="txtCC" class="form-control pull-left" placeholder="Card Number" runat="server" />
                                                        <span id="iCC" class="glyphicon form-control-feedback"></span>
                                                    </div>
                                                    <br />
                                                    <label id="messageCC" class="control-label invisible error-message"></label>
                                                    <script>
                                                        initFunctions("messageCC", "divCC", "iCC", "Must be a valid credit card number!");
                                                        var val = new LiveValidation('txtCC', { onValid: validFunction, onInvalid: invalidFunction });
                                                        val.add(Validate.Presence);
                                                        val.add(Validate.Numericality, { onlyInteger: true });
                                                        val.add(Validate.Length, { minimum: 16, maximum: 30 });
                                                    </script>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label>Rules</label>
                                    <p>*Password must contain 5 to 10 characters</p>
                                    <p>*Username must contain 3 to 8 characters</p>
                                    <p>*Username contain only a-zA-Z</p>
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <div id="existsErrorMessage" class="alert alert-danger alert-dismissable" runat="server" style="display: none;">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                        <strong>Warning!</strong> Username or Email are already exists in the system.
                                    </div>
                                    <asp:Button ID="btnRegister" CssClass="btn-lg btn-primary" runat="server" Text="Register" OnClick="btnRegister_Click" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer" class="text-center center-block background-color-lightblue border-color">
            <br />
            <br />
            <br />
            <div class="row">
                <p>This site designed and build as an assingment for the course "Web Development Environments", 2014, BGU</p>
                <p>Copyright &copy; Dan Ziv & Daniel Shefer | <a href="http://www.w3schools.com/html/html5_intro.asp" style="color: white;">HTML5</a> | <a href="http://www.w3schools.com/css/css3_intro.asp" style="color: white;">CSS3</a> | <a href="http://getbootstrap.com/" style="color: white;">Bootstrap 3.11</a></p>
            </div>
            <br />
        </div>
    </form>
</body>
</html>
